<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div></div>
    <form action="">
        <input type="text" name="" id="">
        <select name="" id="">
            <option value="aaa">选项一</option>
            <option value="bbb">选项2</option>
            <option value="ccc">选项3</option>
        </select>

        <!--
            button按钮 和input type = “submit 可以触发form表单的默认事件
            form表单可以发送请求 action属性是请求地址，会进行页面跳转
            form 表单的默认提交事件
         -->
        <br />
        <br />

        <button>点击</button>
        <!--  <button type="button">点击2</button>
         <input type="button" value="点击3">
         <input type="submit" value="点击4"> -->


        <script>
            var form = document.forms[0];
            // 点击button按钮 和input type = ‘submit’ 可以触发 提交事件onsubmit

            form.onsubmit = function (e) {
                e.preventDefault();
                console.log("提交事件");
            }
            var inp = document.querySelector('input');
            /*  inp.onchange = function () {
                console.log("当前标签的内容更改了");
                // 获取当前标签输入的内容
                console.log(this.value);
            } */


            /*   // 监听内容更改 只要内容更改了就会触发
              inp.oninput = function () {
                  console.log(this.value);
              }
  
              inp.onfocus = function () {
                  console.log("聚焦事件"); // 放到输入框上
              }
              inp.onblur = function () {
                  console.log("失焦事件");
              } */

            var sele = document.querySelector("select");
            sele.onchange = function () {
                console.log("当前当前内容更改了");
                // 获取当前标签输入的内容
                console.log(this.value);
                // 获取下拉框中选中的选项的索引值
                console.log(this.selectedIndex);
            }

            /*   var div = document.querySelector('div');
              div.onfocus = function(){
                  console.log("聚焦事件");
              }
              div.onblur = function(){
                  console.log("失焦事件");
              } */
        </script>

    </form>
</body>

</html>